<template>
	<view class="container">
		<view class="top">
			<image src="../../static/image/学校.png" mode="" class="tb"></image>
		</view>

		<view class="center">
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<uni-forms-item label="学号" name="name">
					<uni-easyinput v-model="valiFormData.name" placeholder="请输入学号" />
				</uni-forms-item>
				<uni-forms-item label="新密码" name="password">
					<uni-easyinput v-model="valiFormData.password" placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item label="确认密码" name="retype">
					<uni-easyinput v-model="valiFormData.retype" placeholder="请输入确认密码" />
				</uni-forms-item>
				<uni-forms-item label="验证码" name="code">
					<uni-easyinput v-model="valiFormData.code" placeholder="请输入验证码" />
				</uni-forms-item>
				<view class="captcha-container">
					<text class="captcha">{{ captcha }}</text>
					<button @click="generateCaptcha">刷新验证码</button>
				</view>
			</uni-forms>
			<button class="an111" @click="register">确认</button>
			<view class="zh" @click="HHHH">哦~ 我知道了</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '学号不能为空'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}, {
							minLength: 3,
							maxLength: 6,
							errorMessage: '密码最小三位最大五位'
						}]
					},
					retype: {
						rules: [{
							required: true,
							errorMessage: '确认密码不能为空'
						}, {
							minLength: 3,
							maxLength: 6,
							errorMessage: '密码最小三位最大五位'
						}]
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '验证码不能为空'
						}]
					}
				},
				valiFormData: {
					name: '',
					password: '',
					code: '',
				},
				captcha: '', // 验证码字段  
				storedUserInfo: null // 新增：用于存储从sessionStorage获取的用户信息
			}
		},
		onLoad() {
			// console.log(res);
			// 页面加载时生成默认验证码  
			this.generateCaptcha();
		},
		methods: {
			generateCaptcha() {
				// 生成一个6位随机数字验证码  
				this.captcha = Math.floor(100000 + Math.random() * 900000).toString();
			},
			register() {
				if (!this.$refs.valiForm) {
					// console.error("hhhhhh");
					return;
				}
				this.$refs.valiForm.validate().then(res => {
					if (res) {
						const userInfo = JSON.stringify({
							name: this.valiFormData.name,
							password: this.valiFormData.password
						});
						sessionStorage.setItem('userInfo', userInfo);
						uni.showToast({
							title: '注册成功',
							icon: 'success'
						});
						uni.reLaunch({
							url: "/pages/index/index" // 根据实际情况调整路径
						});
					} else {
						console.error("Validation failed");
					}
				}).catch(err => {
					console.error('Validation error:', err);
				});
			},
			HHHH() {
				uni.navigateTo({
					url: "/pages/index/index"
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		// background-image: url('/static/styleimg/bg1.jpg');
		background-color: rgba(0, 100, 150, 0.2);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		width: 100vw;
		height: 94vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.top {
		margin-bottom: 250px;
	}
	.tb{
		width: 130px;
		height: 110px;
		padding: 20px;
		background-color: white;
		border-radius: 60% ;
		
	}
	.center {
		margin-top: -450px;
		width: 300px;
		padding: 20px;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	}

	.registerrr {
		width: 280px;
		height: 45px;
		line-height: 45px;
		font-weight: bold;
		background-color: #759ac8;
		color: white;
		font-size: 18px;
		border-radius: 8px;
		border: none;
		cursor: pointer;
		transition: background-color 0.3s ease;
		margin-top: 18px;
		margin-left: 14px;
	}

	.uni-forms-item {
		margin-bottom: 20px;
		padding-left: 15px;
	}

	.uni-easyinput {
		margin-left: -10px;
		width: 220px;
	}

	.captcha-container {
		display: flex;
		width: 265px;
		height: 35px;
		margin-left: 18px;
	}

	.captcha {
		width: 120px;
		font-size: 20px;
		color: #333;
		text-align: center;
		line-height: 35px;
		border-radius: 5px;
		border: 1px solid #19222c;
	}

	.captcha-container button {
		line-height: 35px;
		margin-right: -8px;
	}
	.an111{
		margin-top: 10px;
		background-color: rgba(0, 200, 120, 0.2);
	}
	.zh{
		line-height: 30px;
		text-align: right;
	}
</style>